<template>
  <el-row>
    <el-col :span="6"></el-col>
    <el-col :span="12">
      <el-alert
        v-if="showAlert"
        :title="alertInfo.content"
        :type="alertInfo.type"
        closable
        @close="showAlert = false">
        
      </el-alert>
    </el-col>
  </el-row>

  <h1></h1>
  
  <el-row>
    <el-col :span="8"></el-col>
    <el-col :span="8">
      <el-form :model="formData" ref="formRef" label-width="auto" v-loading="isSetting">
        <el-form-item
          v-for="(attribute, index) in attributes"
          :key="index"
          :label="attribute.label"
          :prop="attribute.name"
        >
          <el-select
            v-if="attribute.type === 'enum'"
            v-model="formData[attribute.name]"
            placeholder="请选择"
          >
            <el-option
              v-for="option in attribute.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
          <el-input
            v-else
            v-model="formData[attribute.name]"
            @input="handleInput"
          ></el-input>

          <el-tag
            :type="info"
            effect="light"
          >{{ attribute.remark }}</el-tag>

        </el-form-item>
        <el-form-item>
          <el-button  type="primary" @click="handleSubmit">修改</el-button>
          <el-button  type="primary" @click="handleUpdate">更新</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import {useRoute} from 'vue-router';

const route = useRoute()
const isSetting = ref(false)
const attributes = ref([]);
const formData = ref({});
const formRef = ref(null);
const showAlert = ref(false)
const alertInfo = ref({
  "type": "error",
  "content": "成功"
})

async function refreshConfig() {
  try {
    console.log("/restful" + route.path)
    const response = await axios.get(window.location.origin + "/restful" + route.path);
    
    attributes.value = response.data.content.data;
    console.log(attributes)

    // yhl: ref的循环必须用这种方式
    attributes.value.forEach(attr => {
      formData.value[attr.name] = attr.value;
    });
  } catch (error) {
    console.error('API call failed:', error);
  }
}


onMounted(async () => {
  refreshConfig()
});

const handleSubmit = async () => {
    try {
      
      console.log(formData)
      isSetting.value = true
      const response = await axios.post("/restful" + route.path, formData.value);
      // console.log(this.$route.fullPath);
      let responseData = response.data
      showAlert.value = true
      if(responseData.errCode >= 0)
      {
        alertInfo.value.type = "success"
      }
      else
      {
        alertInfo.value.type = "error"
      }
      alertInfo.value.content = responseData.errInfo
      refreshConfig()
      console.log("refresh!!!")
      isSetting.value = false
        
    } catch (error) {
    console.error('API call failed:', error);
  }
};

const handleUpdate = async () => {
    try {
      isSetting.value = true
      const response = await axios.put("/restful" + route.path, formData.value);
      // console.log(this.$route.fullPath);
      let responseData = response.data
      showAlert.value = true
      if(responseData.errCode >= 0)
      {
        alertInfo.value.type = "success"
      }
      else
      {
        alertInfo.value.type = "error"
      }
      alertInfo.value.content = responseData.errInfo
      refreshConfig()
      console.log("refresh!!!")
      isSetting.value = false
        
    } catch (error) {
    console.error('API call failed:', error);
  }
};

const handleInput = async () => {
  
  showAlert.value = false
};

</script>

<style scoped>
/* 添加你自己的样式 */
</style>
